<template>
  <div class="home-container">
    <div class="home-container__top">
      <img src="../../../assets/img/personal-cover.png" alt="">
    </div>
    <div class="home-container__bottom">
      <div class="home-container__bottom-center">
        <div class="bottom-container__bg"></div>
        <div class="bottom-container">
          <div class="bottom-left">
            <user-card :nickName1="userInfo.nickName" :userId="userId" :info="userInfo"></user-card>
          </div>
          <div class="bottom-right">
            <div class="bottom-right__tab">
              <div class="tab__left">
                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/blog'}">
                  <p class="abs"></p>
                  <p class="word">博客</p>
                  <p class="line" v-if="selected==='blog'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/project'}">
                  <p class="abs"></p>
                  <p class="word">项目</p>
                  <p class="line" v-if="selected==='project'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/question'}">
                  <p class="abs"></p>
                  <p class="word">问题</p>
                  <p class="line" v-if="selected==='question'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/answer'}">
                  <p class="abs"></p>
                  <p class="word">回答</p>
                  <p class="line" v-if="selected==='answer'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/dynamic'}">
                  <p class="abs"></p>
                  <p class="word">动态</p>
                  <p class="line" v-if="selected==='dynamic'"></p>
                </nuxt-link>
                <nuxt-link tag="div" class="left__item" :to="{path:'/u/'+userId+'/info'}">
                  <p class="abs"></p>
                  <p class="word">资料</p>
                  <p class="line" v-if="selected==='info'"></p>
                </nuxt-link>
              </div>
              <p class="tab__right">
              </p>
            </div>
            <div style="min-height:556px">

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='blog'">
                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" >
                    <project-card   v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.blogId" :info="val"></project-card>
                    <empty-card v-if="rightList.length===0" height="556px"></empty-card>

                  </card-container>
                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
                </div>
              </transition>

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='project'">
                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" >
                    <project-card @listenProjectCardUpdate="dataGetProject(1)"  v-if="rightList.length>0" v-for="(val,index) in rightList" :key="val.projectId" :info="val"></project-card>
                    <empty-card v-if="rightList.length===0" height="556px"></empty-card>

                  </card-container>
                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
                </div>
              </transition>

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='question'">
                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" >
                    <answer-card v-if="rightList.length>0"  v-for="(val,index) in rightList" :key="val.questionId" :info="val"></answer-card>
                    <empty-card v-if="rightList.length===0" height="556px"></empty-card>

                  </card-container>
                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
                </div>
              </transition>

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='answer'">
                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" >
                    <answer-card v-if="rightList.length>0"  v-for="(val,index) in rightList" :key="val.questionId" :info="val"></answer-card>
                    <empty-card v-if="rightList.length===0" height="556px"></empty-card>

                  </card-container>
                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
                </div>
              </transition>

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='dynamic'" style="margin-top:16px">
                  <social-card  @listenSocialCardState="dataGetDynamic(1)" v-for="(val,index) in rightList" :key="val.postId" :info="val"></social-card>
                  <empty-card  v-if="rightList.length===0" height="556px"></empty-card>

                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
                </div>
              </transition>

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='fans'" style="margin-top:16px">
                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" >
                    <fan-card  from="other" v-for="(val,index) in rightList" :key="val.userId" :info="val"></fan-card>
                    <empty-card  v-if="rightList.length===0" height="556px"></empty-card>
                    <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
                  </card-container>
                </div>
              </transition>

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='following'" style="margin-top:16px">
                  <card-container  key="container3"  style="margin-top: 16px" :title="rightConTitle" >

                  <fan-card  from="other"   v-for="(val,index) in rightList" :key="val.userId" :info="val"></fan-card>
                  <empty-card  v-if="rightList.length===0" height="556px"></empty-card>
                  <pagination key="container5" style="margin:20px auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
                  </card-container>
                </div>
              </transition>

              <transition name="fade-transform" mode="out-in">
                <div v-if="selected==='info'">
                  <card-container  key="container3"  style="margin-top: 16px" title="用户信息" >
                    <div class="person-content">
                      <div class="header-avatar-box">
                        <span>头像：</span>
                        <div class="img-box">
                          <img :src="userInfo.userAvatar || ''" alt="">
                        </div>
                      </div>
                      <div>
                        <p><span>昵称：</span>{{userInfo.nickName ? userInfo.nickName : '暂无'}}</p>
                      </div>
                      <div>
                        <p><span>性别：</span>
                          {{genderInfo(userInfo.gender)}}
                        </p>
                      </div>
                      <div>
                        <p><span>生日：</span>{{userInfo.birthday?userInfo.birthday:'未公开'}}</p>
                      </div>
                      <div>
                        <p><span>签名：</span>{{userInfo.signature ? userInfo.signature : '暂无'}}</p>
                      </div>
                      <div>
                        <p><span>微信：</span>{{userInfo.wxNumber ? userInfo.wxNumber : '未公开'}}</p>
                      </div>
                      <div>
                        <p><span>QQ号：</span>{{userInfo.qqNumber ? userInfo.qqNumber : '未公开'}}</p>
                      </div>
                      <div>
                        <p><span>手机号：</span>{{userInfo.mobile ? userInfo.mobile : '未公开'}}</p>
                      </div>
                    </div>

                  </card-container>
                </div>
              </transition>
            </div>

          </div>
        </div>

        <page-footer></page-footer>
      </div>


    </div>

  </div>
</template>

<script>
  import UserCard from '../../../components/pc/userCard';
  import EmptyCard from '../../../components/pc/emptyCard';
  import AnswerCard from '../../../components/pc/answerCard';
  import Pagination from '../../../components/pc/pagination';
  import ReleaseCard from '../../../components/pc/releaseCard';
  import SocialCard from '../../../components/pc/socialContactCard';
  import ProjectCard from '../../../components/pc/projectCard';
  import CardContainer from '../../../components/pc/cardContainer';
  import FanCard from '../../../components/pc/fanCard';
  import PageFooter from '../../../components/pc/pageFooter';
  import config from "../../../action/config";

  export default {
    layout: 'only-header',
    data(){
      return{
        labelList: ['我的消息','私信'],
        userId:'',
        rightList:[],
        pages:1,
        userInfo:{},

        // selected: this.$route.name
      }
    },
    components:{
      UserCard,ProjectCard,CardContainer,PageFooter,EmptyCard,SocialCard,ReleaseCard,AnswerCard,Pagination,FanCard
    },

    watch:{
      $route(to,from){
        if(this.$route.name){
          this.selected = this.$route.params.id;
          this.userId =  this.$route.params.id;

          if(this.$route.params.id==='info'){
            this.dataGetInfoU()
          }
        }
      }
    },
    computed:{
      rightConTitle(){
        if(this.selected==='project'){
          return 'Ta的项目'
        }
        if(this.selected==='blog'){
          return 'Ta的博客'
        }
        if(this.selected==='question'){
          return 'Ta的问题'
        }
        if(this.selected==='answer'){
          return 'Ta的问答'
        }
        if(this.selected==='dynamic'){
          return 'Ta的动态'
        }
        if(this.selected==='info'){
          return 'Ta的信息'
        }
        if(this.selected==='fans'){
          return 'Ta的粉丝'
        }
        if(this.selected==='following'){
          return 'Ta的关注'
        }

      },


    },


    created(){
      this.selected = this.$route.params.select;
      let select = this.$route.params.select;
      this.userId =  this.$route.params.id;

      if(select==='info'){
        this.dataGetInfoU()
      }

      if(select!=='project'&&
        select!=='blog'&&
        select!=='answer'&&
        select!=='dynamic'&&
        select!=='info'&&
        select!=='fans'&&
        select!=='following'&&
        select!=='question'
      ){
        this.$router.replace('/')
      }
    },


    methods:{

      genderInfo (gender) {
        if (gender === 0) {
          return '保密'
        } else if (gender === 1) {
          return '男'
        } else if(gender === 2){
          return '女'
        }

      },

      //获取动态list
      dataGetDynamic(currentPage){
        let userId = this.$route.params.id;
          this.$axios.$get(config.api.get.Post.otherList+userId+'/posts', {
            params: {
              page: currentPage,
              size: 10
            }
          }).then((response) => {
            this.rightList = response.data.dataList;
            this.pages = response.data.totalPage;
          })
      },

      //获取创建的问题list
      dataGetMyAnswer(currentPage){
        let userId = this.$route.params.id;

        this.$axios.$get(config.api.get.Question.otherCreated+userId+'/questions',{
            params:{
              page:currentPage,
              size:10
            }
          }).then((response)=>{
            this.rightList  = response.data.dataList;
            this.pages  = response.data.totalPage;
          })

      },

      //获取回答的问题list
      dataGetNoticeAnswer(currentPage){
        let userId = this.$route.params.id;

          this.$axios.$get(config.api.get.Question.otherParticipated+userId+'/question/participated',{
            params:{
              page:currentPage,
              size:10
            }
          }).then((response)=>{
            this.rightList  = response.data.dataList;
            this.pages = response.data.totalPage;
          })

      },

      //获取我的项目list
      dataGetProject(currentPage){
        let userId = this.$route.params.id;

          this.$axios.$get(config.api.get.Project.otherList+userId+'/projects', {
            params: {
              page: currentPage,
              size: 10
            }
          }).then((response) => {
            this.rightList = response.data.dataList;
            this.pages = response.data.totalPage;
          })

      },

      //获取我的博客list
      dataGetBlog(currentPage){
        let userId = this.$route.params.id;

        this.$axios.$get(config.api.get.Blog.otherList+userId+'/blogs', {
            params: {
              page: currentPage,
              size: 10
            }
          }).then((response) => {
            this.rightList = response.data.dataList;
            this.pages = response.data.totalPage;
          })
      },

      //获取我的粉丝
      dataGetFans(currentPage){
        let userId = this.$route.params.id;

        this.$axios.$get(config.api.get.User.otherFans+userId+'/fans',{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          if(response.code===0){
            this.rightList=response.data.dataList;
            this.pages = response.data.totalPage;
          }
        })
      },

      //获取我的关注
      dataGetFollowing(currentPage){
        let userId = this.$route.params.id;

        this.$axios.$get(config.api.get.User.otherFollowing+userId+'/follower',{
          params:{
            page:currentPage,
            size:10
          }
        }).then((response)=>{
          if(response.code===0){
            this.rightList=response.data.dataList;
            this.pages = response.data.totalPage;
          }
        })
      },

      //获取我的资料
      dataGetInfoU(){
        let userId = this.$route.params.id;

        this.$axios.$get(config.api.get.User.otherInfo+userId+'/baseinfo').then((response)=>{
          if(response.code===0){
            this.userInfo = response.data;
          }
        })
      },


      changePage(currentPage){
        //返回页数 请求新的数据
        if(this.selected==='project'){
          this.dataGetProject(currentPage)
        }
        if(this.selected==='blog'){
          this.dataGetBlog(currentPage)
        }
        if(this.selected==='question'){
          this.dataGetMyAnswer(currentPage)
        }
        if(this.selected==='answer'){
          this.dataGetNoticeAnswer(currentPage)
        }
        if(this.selected==='dynamic'){
          this.dataGetDynamic(currentPage)
        }
        if(this.selected==='fans'){
          this.dataGetFans(currentPage)
        }
        if(this.selected==='following'){
          this.dataGetFollowing(currentPage)
        }
      }

    },

  }


</script>

<style lang="scss" scoped>

  html{
    background-image: $bgImage;

  }
  .home-container{


    align-items: flex-start;
    .home-container__top{
      width:100%;
      height:auto;
      z-index: 100;
      position: relative;
      img{
        width:100%;
        min-height:270*$length;
        background-color:#B9A3D2 ;
        height:auto;
      }
    }
    .home-container__bottom{
      position:relative;
      margin:0 auto;
      .home-container__bottom-center{
        position:absolute;
        top:  -60*$length;
        left:0;
        right:0;
        background-image: $bgImage;

        .bottom-container__bg{
          background-image: $bgImage;
          position:absolute;
          top:  60*$length;
          left:0;
          right:0;
          z-index: -1;

        }
        .bottom-container{
          position:relative;
          z-index: 200;
          padding-bottom: 32*$length;
          width: $pageWidth;
          margin:0 auto;
          @extend %flex-row-spb;
          align-items: flex-start;
          .bottom-left{
            width:302*$length;

          }
          .bottom-right{
            width:938*$length;
            .bottom-right__tab{
              box-sizing: border-box;
              height:62*$length;
              padding:18*$length 24*$length;
              border-bottom:1px solid #EFEFEF;

              @extend %flex-row-spb;
              .tab__left{
                @extend %flex-row-spb;

                .left__item{
                  position:relative;
                  @extend %flex-column-spb;
                  margin-right: 24*$length;

                  .abs{
                    position:absolute;

                  }

                  .word{
                    @include fontStyle(14,19,500,rgba(255,255,255,.6),center);
                    @extend %animate-transition;
                    @extend %cursorPointer;
                    &:hover{
                      color:#fff
                    }
                  }
                  .line{
                    position:absolute;
                    top:32*$length;
                    margin:0 auto;
                    left:0;
                    right:0;
                    width:16*$length;
                    height:4*$length;
                    border-radius:2px  2px 0 0;
                    background-color: #00AAE6;
                  }
                }
              }
              .tab__right{
                @include fontStyle(12,16,500,#999,center);
                @extend %animate-transition;
                @extend %cursorPointer;
                &:hover{
                  color:#00AAE6
                }
              }
            }
            .person-content{
              padding-top: 40*$length;
              padding-left: 154*$length;
              padding-bottom: 27*$length;

              > div {
                margin-bottom: 27*$length;
                @extend %flex-row-spb;
                justify-content: flex-start;
                p {
                  @include fontStyle(14,19,500,#333,left);
                }
              }
              span {
                display: inline-block;
                width: 56*$length;
                margin-right: 16*$length;
                @extend %cursorPointer;
                @include fontStyle(14,19,500,#999,right);
              }
              .header-avatar-box{
                .img-box{
                  width: 90*$length;
                  height: 90*$length;
                  background-color: #F4F8FA;
                  @include border-radius(50%);
                  > img {
                    width: 90*$length;
                    height: 90*$length;
                    object-fit: contain;
                    @include border-radius(50%);
                  }
                }
              }

            }
          }
        }

      }
    }
  }
</style>
